{% extends 'base.html' %}

{% block title %}{{ ticket.title }} - 工单详情{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <!-- 工单基本信息 -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="card-title mb-0">{{ ticket.title }}</h4>
                        {% if ticket.ticket_number %}
                        <small class="card-title mb-3"><strong>工单号: {{ ticket.ticket_number }}</strong></small>
                        {% endif %}
                    </div>
                    <span class="badge 
                        {% if ticket.status == 'draft' %}bg-secondary
                        {% elif ticket.status == 'applied' %}bg-warning
                        {% elif ticket.status == 'registered' %}bg-info
                        {% elif ticket.status == 'assigned' %}bg-primary
                        {% elif ticket.status == 'testing' %}bg-info
                        {% elif ticket.status == 'repairing' %}bg-warning
                        {% elif ticket.status == 'quality_check' %}bg-info
                        {% elif ticket.status == 'completed' %}bg-success
                        {% elif ticket.status == 'returned' %}bg-success
                        {% else %}bg-light text-dark{% endif %}">
                        {{ ticket.get_status_display }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>优先级:</strong>
                            <span class="badge 
                                {% if ticket.priority == 'high' %}bg-danger
                                {% elif ticket.priority == 'medium' %}bg-warning
                                {% else %}bg-info{% endif %}">
                                {{ ticket.get_priority_display }}
                            </span>
                        </div>
                        <div class="col-md-6">
                            <strong>创建时间:</strong> {{ ticket.created_at|date:"Y-m-d H:i" }}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>创建者:</strong> {{ ticket.created_by.username }}
                        </div>
                        <div class="col-md-6">
                            <strong>更新时间:</strong> {{ ticket.updated_at|date:"Y-m-d H:i" }}
                        </div>
                    </div>

                    {% if ticket.assets.exists %}
                    <div class="row mb-3">
                        <div class="col-12">
                            <strong>关联设备:</strong>
                            <ul class="list-unstyled mt-2">
                                {% for asset in ticket.assets.all %}
                                <li class="mb-1">
                                    <span class="badge bg-light text-dark">{{ asset.code }}</span>
                                    {{ asset.name }} ({{ asset.model }})
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% endif %}

                    {% if ticket.assigned_to %}
                    <div class="row mb-3">
                        <div class="col-12">
                            <strong>分配技术人员:</strong> {{ ticket.assigned_to.username }}
                        </div>
                    </div>
                    {% endif %}

                    {% if ticket.completed_at %}
                    <div class="row mb-3">
                        <div class="col-12">
                            <strong>完成时间:</strong> {{ ticket.completed_at|date:"Y-m-d H:i" }}
                        </div>
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <strong>问题描述:</strong>
                        <div class="border rounded p-3 bg-light">
                            {{ ticket.description|linebreaks }}
                        </div>
                    </div>

                    <!-- 工单创建时上传的图片 -->
                    {% if creation_images %}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">工单创建时上传的图片</h5>
                        <div class="image-gallery mt-2">
                            <div class="row">
                                {% for image in creation_images %}
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <div class="image-item text-center">
                                        <a href="{{ image.image.url }}" target="_blank" class="d-block">
                                            <img src="{{ image.image.url }}" alt="工单图片 {{ forloop.counter }}" 
                                                 class="img-thumbnail" style="max-width: 100%; height: 150px; object-fit: cover;">
                                        </a>
                                        <small class="text-muted d-block mt-1">{{ image.description }}</small>
                                    </div>
                                </div>
                                {% if forloop.counter|divisibleby:3 and not forloop.last %}
                            </div>
                            <div class="row">
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- 登记签收时上传的图片 -->
                    {% if registration_images %}
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">登记签收时上传的图片</h5>
                        <div class="image-gallery mt-2">
                            <div class="row">
                                {% for image in registration_images %}
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <div class="image-item text-center">
                                        <a href="{{ image.image.url }}" target="_blank" class="d-block">
                                            <img src="{{ image.image.url }}" alt="登记签收图片 {{ forloop.counter }}" 
                                                 class="img-thumbnail" style="max-width: 100%; height: 150px; object-fit: cover;">
                                        </a>
                                        <small class="text-muted d-block mt-1">{{ image.description }}</small>
                                    </div>
                                </div>
                                {% if forloop.counter|divisibleby:3 and not forloop.last %}
                            </div>
                            <div class="row">
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 维修记录 -->
            {% if maintenance_records %}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">维修记录</h5>
                </div>
                <div class="card-body">
                    {% for record in maintenance_records %}
                    <div class="border-bottom pb-3 mb-3">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <strong>{{ record.technician.username }}</strong>
                            <small class="text-muted">{{ record.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <p class="mb-1">{{ record.description }}</p>
                        
                        <!-- 备件使用情况 -->
                        {% if record.spare_part_usage.exists %}
                        <div class="mt-2">
                            <strong>备件使用:</strong>
                            <ul class="list-unstyled mt-1">
                                {% for usage in record.spare_part_usage.all %}
                                <li class="text-muted small">
                                    {{ usage.spare_part.name }} ({{ usage.spare_part.model }}) - 
                                    数量: {{ usage.quantity }} {{ usage.spare_part.unit }} - 
                                    时间: {{ usage.used_at|date:"Y-m-d H:i" }}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                        
                        {% if record.parts_used %}
                        <div class="text-muted">
                            <small>使用零件: {{ record.parts_used }}</small>
                        </div>
                        {% endif %}
                        {% if record.hours_spent > 0 %}
                        <div class="text-muted">
                            <small>耗时: {{ record.hours_spent }} 小时</small>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-md-4">
            <!-- 操作按钮 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">操作</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <!-- 返回按钮 -->
                        {% if user.profile.role == 'technician' %}
                        <a href="{% url 'tickets:ticket_list_assigned' %}" class="btn btn-outline-secondary">
                            ← 返回我的工单
                        </a>
                        {% elif user.is_staff or user.profile.role == 'admin' %}
                        <a href="{% url 'tickets:ticket_list_all' %}" class="btn btn-outline-secondary">
                            ← 返回所有工单
                        </a>
                        {% elif user.profile.role == 'receptionist' %}
                        <a href="{% url 'tickets:ticket_list_all' %}" class="btn btn-outline-secondary">
                            ← 返回工单列表
                        </a>
                        {% elif user.profile.role == 'quality_checker' %}
                        <a href="{% url 'tickets:ticket_list_quality_checker' %}" class="btn btn-outline-secondary">
                            ← 返回工单列表
                        </a>
                        {% else %}
                        <a href="{% url 'tickets:ticket_list_mine' %}" class="btn btn-outline-secondary">
                            ← 返回工单列表
                        </a>
                        {% endif %}

                        <!-- 统一操作区域 -->
                        <!-- 草稿编辑操作：创建者在draft状态下可见 -->
                        {% if ticket.status == 'draft' and user == ticket.created_by %}
                        <a href="{% url 'tickets:ticket_edit' ticket.pk %}" class="btn btn-secondary">
                            ✏️ 编辑草稿
                        </a>
                        {% endif %}

                        <!-- 登记签收操作：前台和管理员在applied状态下可见 -->
                        {% if ticket.status == 'applied' %}
                            {% if user.is_staff or user.profile.role == 'receptionist' %}
                            <a href="{% url 'tickets:ticket_register' ticket.pk %}" class="btn btn-primary">
                                📝 登记签收
                            </a>
                            {% endif %}
                        {% endif %}

                        <!-- 分配技术人员操作：管理员在registered状态下可见 -->
                        {% if ticket.status == 'registered' and user.is_staff %}
                        <a href="{% url 'tickets:ticket_assign' ticket.pk %}" class="btn btn-primary">
                            👥 分配技术人员
                        </a>
                        {% endif %}

                        <!-- 开始检测操作：技术人员和管理员在assigned状态下可见 -->
                        {% if ticket.status == 'assigned' %}
                            {% if user == ticket.assigned_to or user.is_staff %}
                            <a href="{% url 'tickets:ticket_testing' ticket.pk %}" class="btn btn-warning">
                                🔍 开始检测
                            </a>
                            {% endif %}
                        {% endif %}

                        <!-- 开始维修操作：技术人员和管理员在testing状态下可见 -->
                        {% if ticket.status == 'testing' %}
                            {% if user == ticket.assigned_to or user.is_staff %}
                            <a href="{% url 'tickets:ticket_repairing' ticket.pk %}" class="btn btn-warning">
                                🛠️ 开始维修
                            </a>
                            {% endif %}
                        {% endif %}

                        <!-- 添加维修记录操作：技术人员和管理员在testing/repairing状态下可见 -->
                        {% if ticket.status in 'testing,repairing' %}
                            {% if user == ticket.assigned_to or user.is_staff %}
                            <a href="{% url 'tickets:add_maintenance_record' ticket.pk %}" class="btn btn-info">
                                📝 添加维修记录
                            </a>
                            {% endif %}
                        {% endif %}

                        <!-- 质量检查操作：质检员和管理员在repairing状态下可见 -->
                        {% if ticket.status == 'repairing' %}
                            {% if user.is_staff or user.profile.role == 'quality_checker' %}
                            <a href="{% url 'tickets:ticket_quality_check' ticket.pk %}" class="btn btn-info">
                                ✅ 质量检查
                            </a>
                            {% endif %}
                        {% endif %}

                        <!-- 报废操作：技术人员、质检员和管理员在检测、维修、质检环节可见 -->
                        {% if ticket.status in 'testing,repairing,quality_check' %}
                            {% if user == ticket.assigned_to or user.is_staff or user.profile.role == 'quality_checker' %}
                            <form method="post" action="{% url 'tickets:ticket_process' ticket.pk %}" class="d-grid">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="scrap">
                                <button type="submit" class="btn btn-danger" 
                                        onclick="return confirm('确定要报废所有关联设备并终止此工单吗？此操作不可撤销！')">
                                    🗑️ 报废设备并终止工单
                                </button>
                            </form>
                            {% endif %}
                        {% endif %}

                        <!-- 完成维修操作：管理员在quality_check状态下可见 -->
                        {% if ticket.status == 'quality_check' and user.is_staff %}
                        <a href="{% url 'tickets:ticket_complete' ticket.pk %}" class="btn btn-success">
                            🎉 完成维修
                        </a>
                        {% endif %}

                        <!-- 设备返还操作：前台和管理员在completed状态下可见 -->
                        {% if ticket.status == 'completed' %}
                            {% if user.is_staff or user.profile.role == 'receptionist' %}
                            <a href="{% url 'tickets:ticket_return' ticket.pk %}" class="btn btn-success">
                                📦 设备返还
                            </a>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 状态信息 -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">维修流程</h5>
                </div>
                <div class="card-body">
                    <div class="status-timeline">
                        <!-- 维修申请 -->
                        <div class="status-item {% if ticket.status in 'applied,registered,assigned,testing,repairing,quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'applied' %}current{% endif %} {% if ticket.status == 'draft' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>维修申请</strong>
                                <small>客户提交维修申请</small>
                                {% if ticket.created_by %}<br><small class="text-muted">操作人: {{ ticket.created_by.get_full_name|default:ticket.created_by.username }}</small>{% endif %}
                                {% if ticket.created_at %}<br><small class="text-muted">时间: {{ ticket.created_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 登记签收 -->
                        <div class="status-item {% if ticket.status in 'registered,assigned,testing,repairing,quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'registered' %}current{% endif %} {% if ticket.status == 'applied' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>登记签收</strong>
                                <small>前台确认接收设备</small>
                                {% if ticket.registered_by %}<br><small class="text-muted">操作人: {{ ticket.registered_by.get_full_name|default:ticket.registered_by.username }}</small>{% endif %}
                                {% if ticket.registered_at %}<br><small class="text-muted">时间: {{ ticket.registered_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 设备分配 -->
                        <div class="status-item {% if ticket.status in 'assigned,testing,repairing,quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'assigned' %}current{% endif %} {% if ticket.status == 'registered' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>设备分配</strong>
                                <small>管理员分配技术人员</small>
                                {% if ticket.assigned_by %}<br><small class="text-muted">操作人: {{ ticket.assigned_by.get_full_name|default:ticket.assigned_by.username }}</small>{% endif %}
                                {% if ticket.assigned_at %}<br><small class="text-muted">时间: {{ ticket.assigned_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 检测 -->
                        <div class="status-item {% if ticket.status in 'testing,repairing,quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'testing' %}current{% endif %} {% if ticket.status == 'assigned' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>设备检测</strong>
                                <small>技术人员检测问题</small>
                                {% if ticket.assigned_to %}<br><small class="text-muted">操作人: {{ ticket.assigned_to.get_full_name|default:ticket.assigned_to.username }}</small>{% endif %}
                                {% if ticket.testing_at %}<br><small class="text-muted">时间: {{ ticket.testing_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 维修 -->
                        <div class="status-item {% if ticket.status in 'repairing,quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'repairing' %}current{% endif %} {% if ticket.status == 'testing' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>设备维修</strong>
                                <small>进行实际维修工作</small>
                                {% if maintenance_records %}<br><small class="text-muted">操作人: {{ maintenance_records.first.technician.get_full_name|default:maintenance_records.first.technician.username }}</small>{% endif %}
                                {% if ticket.repairing_at %}<br><small class="text-muted">时间: {{ ticket.repairing_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 质检 -->
                        <div class="status-item {% if ticket.status in 'quality_check,completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'quality_check' %}current{% endif %} {% if ticket.status == 'repairing' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>设备质检</strong>
                                <small>质量检查确认维修质量</small>
                                {% if ticket.quality_check_by %}<br><small class="text-muted">操作人: {{ ticket.quality_check_by.get_full_name|default:ticket.quality_check_by.username }}</small>{% endif %}
                                {% if ticket.quality_check_at %}<br><small class="text-muted">时间: {{ ticket.quality_check_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 维修完成 -->
                        <div class="status-item {% if ticket.status in 'completed,returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'completed' %}current{% endif %} {% if ticket.status == 'quality_check' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>维修完成</strong>
                                <small>维修工作完成</small>
                                {% if ticket.completed_by %}<br><small class="text-muted">操作人: {{ ticket.completed_by.get_full_name|default:ticket.completed_by.username }}</small>{% endif %}
                                {% if ticket.completed_at %}<br><small class="text-muted">时间: {{ ticket.completed_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                        <!-- 已返还 -->
                        <div class="status-item {% if ticket.status == 'returned' %}completed{% endif %}">
                            <div class="status-dot {% if ticket.status == 'returned' %}current{% endif %} {% if ticket.status == 'completed' %}next{% endif %}"></div>
                            <div class="status-content">
                                <strong>已返还</strong>
                                <small>设备返还客户</small>
                                {% if ticket.returned_by %}<br><small class="text-muted">操作人: {{ ticket.returned_by.get_full_name|default:ticket.returned_by.username }}</small>{% endif %}
                                {% if ticket.returned_at %}<br><small class="text-muted">时间: {{ ticket.returned_at|date:"Y-m-d H:i" }}</small>{% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 1200px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0 !important;
}
.badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}
.btn {
    border-radius: 5px;
}
.status-timeline {
    position: relative;
    padding-left: 20px;
}
.status-item {
    position: relative;
    padding: 10px 0;
    margin-left: 10px;
}
.status-dot {
    position: absolute;
    left: -20px;
    top: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    border: 2px solid white;
}
.status-item.completed .status-dot {
    background-color: #28a745;
}
.status-dot.current {
    background-color: #28a745;
    border-color: white;
}
.status-dot.next {
    background-color: #007bff;
    border-color: white;
}
.status-content {
    margin-left: 10px;
}
.status-item:not(:last-child):after {
    content: '';
    position: absolute;
    left: -15px;
    top: 27px;
    bottom: -10px;
    width: 2px;
    background-color: #ddd;
}
.status-item.completed:after {
    background-color: #28a745;
}

/* 图片区域样式 */
.image-gallery h5 {
    color: #2c3e50;
    font-weight: 600;
    border-color: #3498db !important;
}

.image-item {
    transition: transform 0.2s ease;
}

.image-item:hover {
    transform: translateY(-2px);
}

.img-thumbnail {
    border: 2px solid #dee2e6;
    transition: border-color 0.2s ease;
}

.img-thumbnail:hover {
    border-color: #3498db;
}
</style>
{% endblock %}
